<template>
	<div id="studentManage">
		<div class="breadcrumb">
			<img src="../../../../static/img/campus_icon_1.png" class="head_img">
			<span class="title">学生管理</span>
		</div>

		<div class="search">
			<el-select v-model="semester" @change="changeSemester">
				<el-option v-for='item in semesters' :label='item.semesterName' :value='item.sid' :key="item.sid">
				</el-option>
			</el-select>
			<el-select v-model="teacher" @change="getClasses()" :disabled="isDisabled" v-if="user.type !==3">
				<el-option label="全部老师" value='0'></el-option>
				<el-option v-for='item in teachers' :label='item.teacherName' :value='item.mid' :key="item.mid">
				</el-option>
			</el-select>
			<el-select v-model="course" :disabled="isDisabled">
				<el-option label="全部课程" value='0'></el-option>
				<el-option v-for='item in courses' :label='item.name' :value='item.cid' :key="item.cid">
				</el-option>
			</el-select>
			<el-select v-model="freezeType">
				<el-option label="全部学生" value='0'></el-option>
				<el-option label="未冻结账号" value='1'></el-option>
				<el-option label="已冻结账号" value='2'></el-option>
			</el-select>
			<el-button class="sel_btn" type="primary" @click="search">筛选</el-button>
		</div>

		<div class="list">
			<div class="list_head">
				<span class="head_name">
					<el-input type='text' placeholder="请输入学生手机号、学号或者姓名" icon="search" @keyup.enter.native="search" :on-icon-click="search" v-model="condition"
					 class="keyword"></el-input>
				</span>
				<el-button class="operate" type="primary" @click="freezeSome()">批量解除冻结</el-button>
			</div>
			<el-table :data="list" @selection-change="changed">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column prop="campusId" label="校园号">
				</el-table-column>
				<el-table-column prop="name" label="姓名">
				</el-table-column>
				<el-table-column prop="gender" label="性别" width="80">
				</el-table-column>
				<el-table-column prop="gradeClassName" label="班级">
					<template scope="scope">
						<span>{{scope.row.gradeClassName}}</span>
						<br>
						<span v-if="scope.row.gradeClassTeacherName">(班主任：{{scope.row.gradeClassTeacherName}})</span>
					</template>
				</el-table-column>
				<el-table-column prop="className" label="课程">
					<template scope="scope">
						<span>{{scope.row.className}}</span>
						<br>
						<span v-if="scope.row.teacherName">(教师：{{scope.row.teacherName}})</span>
					</template>
				</el-table-column>
				<el-table-column width="240" align="right">
					<template scope="scope">
						<el-button size="small" type="text" @click="editStudent(scope.row)">编辑学生信息</el-button>
						<el-button size="small" type="text" @click="freeze(scope.row)" v-if="scope.row.freezeStatus == 0">冻结</el-button>
						<el-button size="small" type="text" @click="unfreeze(scope.row)" v-if="scope.row.freezeStatus == 1">解除冻结</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination v-show="this.totalCount > 0" layout="prev, pager, next, jumper" :page-size="10" :current-page="currentPage"
				 :total="totalCount" @current-change="handleCurrentChange">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";

	export default {
		data() {
			return {
				list: [],
				courses: [],
				teachers: [],
				semesters: [],
				semester: "",
				teacher: "0",
				course: "0",
				condition: "",
				totalCount: 0,
				freezeType: "0",
				isDisabled: true,
				currentPage: parseInt(this.$util.getUrlParam("pageNum")) || 1
			};
		},
		mounted() {
			if (this.user.type == 3) {
				this.teacher = this.user.mid;
				let cid = this.$util.getUrlParam("cid");
				if (cid) {
					this.course = cid == "0" ? "0" : cid * 1;
				}
			} else {
				let cid = this.$util.getUrlParam("cid");
				if (cid) {
					this.course = cid == "0" ? "0" : cid * 1;
				}
				this.getTeachers();
			}
			//获取学期数据
			this.getSemesters();
		},
		computed: mapState({ user: state => state.user }),
		methods: {
			//学期列表
			getSemesters() {
				let url = this.$util.domain + "/campusadminapi/v1/tools/semesters";
				this.$http({
					url,
					method: "GET"
				}).then(response => {
					if (response.data.error == 10000) {
						let semesterList = response.data.data;
						let sid = this.$util.getUrlParam("sid");
						if (semesterList && semesterList.length > 0) {
							if (sid) {
								this.semester = sid == "0" ? "0" : sid * 1;
								this.freezeType = this.$util.getUrlParam("freezeType");
								this.condition = this.$util.getUrlParam("condition");
							} else {
								this.semester = semesterList[0].sid;
							}
							for (let i = 0; i < semesterList.length; i++) {
								this.semesters.push({
									sid: semesterList[i].sid,
									unids: semesterList[i].unids,
									endDate: semesterList[i].endDate,
									startDate: semesterList[i].startDate,
									semesterName: semesterList[i].semesterName
								});
							}
						}
						this.getStudentList();
						this.getTotalCount();
					}
				});
			},
			changeSemester() {
				if (this.semester == "0") {
					this.isDisabled = true;
				} else {
					this.isDisabled = false;
				}
				this.getClasses();
			},
			//教师列表,
			getTeachers() {
				let url = this.$util.domain + "/campusadminapi/v1/tools/teachers";
				this.$http({
					url,
					method: "GET"
				}).then(response => {
					if (response.data.error == 10000) {
						let teacherList = response.data.data;
						let mid = this.$util.getUrlParam("mid");
						if (mid) {
							this.teacher = mid == "0" ? "0" : mid * 1;
							let cid = this.$util.getUrlParam("cid");
							this.course = cid == "0" ? "0" : cid * 1;
						}
						if (teacherList && teacherList.length > 0) {
							for (let i = 0; i < teacherList.length; i++) {
								this.teachers.push({
									mid: teacherList[i].mid,
									teacherName: teacherList[i].teacherName
								});
							}
						}
					}
				});
			},
			//课程列表
			getClasses() {
				this.courses = [];
				let url = this.$util.domain + "/campusadminapi/v1/tools/classes";
				if (this.teacher == "0" || this.semester == "0") {
					this.course = "0";
					return;
				}
				this.$http({
					url,
					method: "GET",
					params: {
						mid: this.teacher,
						sid: this.semester
					}
				}).then(response => {
					if (response.data.error == 10000) {
						this.courses = [];
						let coursesList = response.data.data;

						if (coursesList && coursesList.length > 0) {
							for (let i = 0; i < coursesList.length; i++) {
								this.courses.push({
									cid: coursesList[i].id,
									name: coursesList[i].name
								});
							}
						}
						this.course = "0";
					}
				});
			},
			search() {
				this.getStudentList();
				this.getTotalCount();
			},
			//查询该搜索条件下学生人数
			getTotalCount() {
				let url = this.$util.domain + "/campusadminapi/v1/student/totalCount";

				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						condition: this.condition,
						cid: parseInt(this.course),
						mid: parseInt(this.teacher),
						sid: parseInt(this.semester),
						freezeStatus: parseInt(this.freezeType)
					})
				}).then(response => {
					if (response.data.error == 10000) {
						this.totalCount = response.data.data;
					}
				});
			},
			getStudentList() {
				this.list = [];
				let url = this.$util.domain + "/campusadminapi/v1/student/list";

				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						pageSize: 10,
						pageNum: this.currentPage,
						cid: parseInt(this.course),
						mid: parseInt(this.teacher),
						sid: parseInt(this.semester),
						condition: this.condition.trimLeft(),
						freezeStatus: parseInt(this.freezeType)
					})
				}).then(response => {
					if (response.data.error == 10000) {
						let StudentList = response.data.data;
						this.list = [];
						if (StudentList && StudentList.length > 0) {
							for (let i = 0; i < StudentList.length; i++) {
								let $index = i + 1,
									$uid = StudentList[i].uid,
									$unid = StudentList[i].unid,
									$name = StudentList[i].name,
									$gender = StudentList[i].gender,
									$campusId = StudentList[i].campusId,
									$zoneName = StudentList[i].zoneName,
									$className = StudentList[i].className,
									$department = StudentList[i].department,
									$teacherName = StudentList[i].teacherName,
									$freezeStatus = StudentList[i].freezeStatus,
									$gradeClassName = StudentList[i].gradeClassName,
									$gradeClassTeacherName = StudentList[i].gradeClassTeacherName;

								if ($gender == 1) {
									$gender = "男";
								} else {
									$gender = "女";
								}

								this.list.push({
									uid: $uid,
									unid: $unid,
									name: $name,
									index: $index,
									gender: $gender,
									zoneName: $zoneName,
									campusId: $campusId,
									// className: $className ? $className + " （教师：" + $teacherName + '）' : $className,
									className: $className,
									teacherName: $teacherName,
									department: $department,
									// gradeClassName: $gradeClassTeacherName ? $gradeClassName + " （班主任：" + $gradeClassTeacherName + "）" : $gradeClassName,
									gradeClassTeacherName: $gradeClassTeacherName,
									gradeClassName: $gradeClassName,
									freezeStatus: $freezeStatus
								});
							}
						}
						// this.course = '0';
					}
				});
			},
			//表格中的多选变化时触发的方法；
			changed(selection) {
				this.selection = selection;
			},
			//请求分页数据
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getStudentList();
			},
			// 冻结
			freeze(row) {
				let url = "/student/freezeAccount";
				let arr = [row.uid];
				this.$confirm("您确定要将“" + row.name + "”冻结吗？", "温馨提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消"
				}).then(() => {
					this.changeStatus(arr, url, "已成功冻结");
				}).catch(() => { });
			},
			// 解除冻结
			unfreeze(row) {
				let url = "/student/unfreezeAccount";
				let arr = [row.uid];
				this.$confirm("您确定要将“" + row.name + "”解除冻结吗？", "温馨提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消"
				}).then(() => {
					this.changeStatus(arr, url, "已解除冻结");
				}).catch(() => { });
			},
			//批量解冻
			freezeSome() {
				let unfreezeList = [];

				if (!this.selection) {
					return;
				}
				this.selection.forEach((item, index) => {
					if (item.freezeStatus == 1) {
						unfreezeList.push(item.uid);
					}
				});
				if (unfreezeList.length == 0) {
					return;
				}
				let url = "/student/unfreezeAccount";
				this.changeStatus(unfreezeList, url, "批量解除冻结成功");
			},
			// 冻结与解除冻结操作
			changeStatus(arr, action, message) {
				let url = this.$util.domain + action;
				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						uids: arr
					})
				}).then(response => {
					if (response.data.type == 200) {
						this.$util.successMsg(message);
						this.getStudentList();
					} else {
						this.$util.errorMsg(response.data.msg);
					}
				});
			},
			// 编辑学生信息
			editStudent(row) {
				let params = {
					uid: row.uid,
					cid: this.course,
					mid: this.teacher,
					sid: this.semester,
					pageNum: this.currentPage,
					freezeType: this.freezeType,
					condition: encodeURI(this.condition.trimLeft())
				};
				this.$util.refreshTo("/#/editStudent", params);
			}
		}
	};
</script>

<style scoped>
	#studentManage {
		padding-top: 60px;
		height: calc(100% - 100px);
	}

	#studentManage .list {
		min-height: calc(100% - 160px);
	}

	.export {
		position: absolute;
		right: 20px;
		background-color: #00c18b;
		border-radius: 0;
	}

	.search {
		margin: 20px 30px;
		background: #ffffff;
		border-radius: 2px;
		height: 60px;
		line-height: 60px;
		padding: 0 25px;
	}

	.sel_btn {
		position: absolute;
		right: 55px;
		margin-top: 12px;
	}

	.operate {
		position: absolute;
		right: 0px;
	}

	#studentManage .el-select {
		display: inline-block;
		width: 20%;
	}

	.keyword {
		width: 350px;
	}
</style>